<template>
  <xy-page>
    <div class="livePlayback">
      <div>
        <span class="w120 txtR">回放功能:</span>
        <el-switch class="mgl20" v-model="watchset" @change="openSet"></el-switch>
        <div v-if="watchset==false" style="color:#ccc">开启后，优先播放回放列表中的视频，回放列表为空时播放首个直播暂存的视频</div>
        <div v-else style="color:#ccc">关闭后，直播观看页不播放回放视频</div>
      </div>

      <el-tabs v-model="activeName" class="mgt40" @tab-click="tabSelect">
        <el-tab-pane label="直播暂存" name="first">
          <div class="play">
            <div class="fl overdue">直播暂存视频文件只保留30天，如需永久保留请转存至回放列表</div>
            <div class="fr">
              <el-button @click="isPlaydialog(1)">添加到回放列表</el-button>
              <el-button @click="isPlaydialog(2)">合并</el-button>
              <el-button @click="delStorage">删除</el-button>
            </div>
          </div>
          <xy-table :loading="liveTable.isloading" :tableData="liveTable" >
            <el-table-column width="30">
              <template slot-scope="scope">
                <el-checkbox v-model="liveTable.list[scope.$index].checked"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="视频名称" min-width="150" align="center">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column prop="dateTime" label="直播开始时间" min-width="180" align="center"></el-table-column>
            <el-table-column prop="datelong" label="视频时长" min-width="150" align="center"></el-table-column>
            <el-table-column prop="overday" label="暂存剩余天数" min-width="150" align="center"></el-table-column>
            <el-table-column prop="sessionId" label="场次ID" min-width="150" align="center"></el-table-column>
            <el-table-column label="操作" min-width="200" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="liveVideo(scope.row)" ref="preview">预览</el-button>
                  <el-tooltip placement="bottom" effect="light" >
                    <div slot="content" >
                      <el-button type="text" v-show="scope.row.m3u8" @click.native="downVideo(scope.row.m3u8)">m3u8</el-button>
                      <el-button type="text" style="margin-left:0" v-show="scope.row.mp4"  @click.native="downVideo(scope.row.mp4)">mp4</el-button>
                    </div>
                    <el-button type="text">下载</el-button>
                  </el-tooltip>
              </template>
            </el-table-column>
          </xy-table>
        </el-tab-pane>

        <el-tab-pane label="回放列表" name="second">
          <div class="play">
            <div class="fl overdue">回放视频转入回放列表需要一定转码时间，请耐心等待。</div>
            <div class="fr">
              <el-button @click="playBacklist">添加</el-button>
              <el-button @click="delPlayback">删除</el-button>
            </div>
          </div>
          <xy-table :loading="playTable.isloading" :tableData="playTable">
            <el-table-column label="" width="30">
                <template slot-scope="scope">
                  <el-checkbox v-model="playTable.list[scope.$index].checked"></el-checkbox>
                </template>
            </el-table-column>
            <el-table-column label="视频名称" min-width="150" align="center">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <!-- <el-table-column prop="date" label="直播开始时间" min-width="180" align="center"></el-table-column> -->
            <el-table-column prop="datelong" label="视频时长" min-width="150" align="center"></el-table-column>
            <el-table-column prop="sessionId" label="场次ID" width="150" align="center"></el-table-column>
            <el-table-column prop="status" label="状态" min-width="150" align="center"></el-table-column>
            <el-table-column label="操作" min-width="200" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="playVideo(scope.row)">预览</el-button>
                <el-button type="text" v-if="showDown(scope.row)" @click.native="downMp(scope.row.fileUrl)">下载</el-button>
                <el-button type="text" @click="soltWard(scope.row,'up')" :disabled="scope.$index == 0">上移</el-button>
                <el-button type="text" @click="soltWard(scope.row,'down')" :disabled="scope.$index == playTable.list.length - 1">下移</el-button>
              </template>
            </el-table-column>
          </xy-table>
        </el-tab-pane>
      </el-tabs>

      <el-dialog title="预览" :visible.sync="dialogPlay" v-if="dialogPlay" :modal="false" :close-on-click-modal="false" width="700px">
        <div class="mgt20" >
          <div id='player' style="width:600px;height:400px;border:1px solid #ccc;margin:0 auto;"></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <div style="text-align:center;margin-top:20px;padding-bottom:20px;">
            <el-button type="primary" @click="dialogPlay = false">关闭预览</el-button>
          </div>
        </span>
      </el-dialog>

      <el-dialog title="转存信息填写" :visible.sync="addPlaydiolag" width="700px" :modal="false" :close-on-click-modal="false">
        <div style="margin:0 auto;width:550px;">
          <div>文件名称：</div>
          <el-input v-model="fileName" placeholder="请输入转存后的视频名称" clearable style="width:500px" maxlength="30"></el-input><span style="position: absolute;margin-left: 10px;height: 40px;line-height: 40px;">{{fileName.length}}/30</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="storagePlay">确认保存</el-button>
          <el-button @click="addPlaydiolag = false">取 消</el-button>
        </span>
      </el-dialog>

      <el-dialog title="合并信息填写" :visible.sync="meshPlaydiolag" :modal="false" :close-on-click-modal="false" width="700px">
        <div style="margin:0 auto;width:550px;">
          <div>文件名称：</div>
          <el-input v-model="fileName" placeholder="请输入合并后的视频名称" clearable style="width:500px" maxlength="30"></el-input><span style="position: absolute;margin-left: 10px;height: 40px;line-height: 40px;">{{fileName.length}}/30</span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="mergeStorage">确认保存</el-button>
          <el-button @click="meshPlaydiolag = false">取 消</el-button>
        </span>
      </el-dialog>

      <el-dialog title="添加回放视频" :visible.sync="dialogTableVisible" :modal="false" :close-on-click-modal="false" width="700px">
          <el-table :data="playBack.list">
            <el-table-column width="30">
              <template slot-scope="scope">
                <el-checkbox v-model="playBack.list[scope.$index].checked"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="缩略图" min-width="120" align="center">
              <template slot-scope="scope">
                <img :src="playBack.list[scope.$index].imgurl" class="liberole-img">
              </template>
            </el-table-column>
            <el-table-column prop="title" label="视频名称" min-width="150" align="center"></el-table-column>
            <!-- <el-table-column prop="date" label="直播开始时间" min-width="150" align="center"></el-table-column> -->
            <el-table-column prop="datelong" label="视频时长" min-width="150" align="center"></el-table-column>
          </el-table>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="savePlayback">确 定</el-button>
            <el-button @click="dialogTableVisible = false">取 消</el-button>
          </span>
      </el-dialog>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      watchset: false,
      activeName: 'first',
      dialogTableVisible: false,
      channelId:'',
      appId:'',
      selectItem:'',
      isSelect:false,
      tableList:[],//选择的数据
      liveTable: {
        isloading: false,
        total: 0,
        page: 1,
        size: 10,
        list: []
      },
      playTable: {
        total: 0,
        isloading: false,
        page: 1,
        size: 10,
        list: []
      },
      playBack:{
        isloading: false,
        total: 0,
        page: 1,
        size: 10,
        list: []
      },
      storage:[],
      selectLive:[],
      selectPlay:[],
      addPlaydiolag:false,
      meshPlaydiolag:false,
      fileName:'',
      dialogPlay:false,
      videoUrl:''
    }
  },
  methods: {
    showDown(row){
      //回访列表显示下载按钮
      if(row.fileUrl.indexOf('recordclip') && row.fileUrl.indexOf('recordmerge')){
        return true
      }
    },
    downMp(row){
      let downUrl =row.replace('m3u8','mp4')
      this.$utils.linkTo(downUrl)
    },
    downVideo(row){//下载视频
      let downUrl= row
      this.$utils.linkTo(downUrl)
    },
    playVideo(row){//回放列表预览
      this.dialogPlay = true
      this.$nextTick(()=>{
         polyvObject('#player').livePlayer({
          wrap: "#player",
          width:'600',
          height:'400',
          uid: row.userId,
          vid: row.channelId,
          vodsrc: row.url,
          forceH5: true,
        })
      })
    },
    liveVideo(row){//暂存列表预览
      this.dialogPlay = true
      this.$nextTick(()=>{
         polyvObject('#player').livePlayer({
          wrap: "#player",
          width:'600',
          height:'400',
          uid: row.userId,
          vid: row.channelId,
          vodsrc: row.m3u8,
          forceH5: true,
        })
      })
    },
    closeDialog(){//清空数据 关闭视频播放
      this.videoUrl = ''
    },
    soltWard(item,type){//单个排序
      this.$postStream('/admin/instance/ccb/polyv/channel/playBackSingleSort.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          type: type,
          videoId: item.videoId
        },
        success:res=>{
          if(res.success){
            this.$message.success('移动成功')
            this.playList()
          }
        }
      })
    },
    playBacklist(){//获取可添加到回放列表的视频列表
      this.dialogTableVisible=true
      this.$postStream('/admin/instance/ccb/polyv/channel/playBackGetList.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          limit: this.playBack.size,
          page: this.playBack.page,
        },
        success:res=>{
          if(res.success){
            this.playBack.list=res.object.contents.map(element=>{
              return{
                checked:false,
                name: element.title,
                imgurl:element.firstImage,
                title:element.title,
                date: this.$utils.formatTime(element.createdTime),
                datelong: element.duration,
                videoId : element.videoPoolId
              }
            })
          }
        }
      })
    },
    splitTime(item){//日期
      let year = item.substr(0,4)
      let month = item.substr(4,2)
      let date = item.substr(6,2)
      let hour = item.substr(8,2)
      let minute = item.substr(10,2)
      let second = item.substr(12,2)
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    },
    storageList(pageNo) {// 暂存列表
      this.liveTable.isloading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/record/list.do', {
        data: {
          appId: this.appId,
          channelId: this.channelId,
          page: pageNo||this.liveTable.page,
          limit: this.liveTable.size
        },
        success: res => {
          if (res.success) {
            this.liveTable.page = pageNo||this.liveTable.page
            this.liveTable.total = res.object.totalItems
            this.liveTable.list = res.object.contents.map(element=>{
              return{
                checked:false,
                name: element.name, //录制文件名称
                sessionId: element.channelSessionId, //直播场次id
                url: element.url,//录制文件地址
                dateTime: this.splitTime(element.startTime),
                datelong: element.time,
                overday: element.daysLeft, //暂存天数
                mp4: element.mp4,
                m3u8: element.m3u8,
                fileId: element.fileId,
                fileName: element.name,
                userId: element.userId,
                channelId: element.channelId
              }
            })
          } else {
            this.$message.error('获取暂存列表失败')
          }
        },
        complete: ()=>{
          this.liveTable.isloading = false
        }
      })
    },
    isPlaydialog(type){
      this.selectLive=[]
      this.liveTable.list.filter((item)=>{
        if(item.checked) {
          return this.selectLive.push(item.fileId)
        }
      })
      if(!this.selectLive.length){
        this.$message.info('至少勾选一个')
        return
      }
      if(type==1){
        this.addPlaydiolag=true
      }else{
        console.log(this.selectLive.length)
        if(this.selectLive.length==1){
          this.$message.error('合并至少需要两个')
          return
        }
        this.meshPlaydiolag=true
      }
      this.fileName=''
    },
    storagePlay(){//暂存转换为存放
      if(!this.fileName.trim()){
        this.$message.error('转存需填写名称，否则失败')
        return
      }
      let fileIdlist=this.selectLive.toString()
      this.$postStream('/admin/instance/ccb/polyv/channel/record/convert.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          fileIds: fileIdlist,
          fileName:this.fileName,
        },
        success:res=>{
          if(res.success){
            this.addPlaydiolag = false
            this.$message.success('添加到回放列表成功，转码需要一定时间!')
            this.fileName=''
            this.storageList()
          }else{
            let message = ''
            if(res.code == 50001){
              message = res.message
            }else if(res.message.indexOf('record file already transferred') != -1){
              message = '视频已在回放列表'
            }else{
              message = '转存失败'
            }
            this.$message.error(message)
            this.addPlaydiolag = false
            this.fileName=''
            this.storageList()
          }
        }
      })
    },
    delStorage(){// 暂存列表视频删除提示
      this.selectLive=[]
      this.liveTable.list.filter((item)=>{
        if(item.checked) {
          return this.selectLive.push(item.fileId)
        }
      })
      if(!this.selectLive.length){
        this.$message.info('至少勾选一个')
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fileIdlist = this.selectLive.toString()
        this.$postStream('/admin/instance/ccb/polyv/channel/record/delete.do',{
          data:{
            appId: this.appId,
            channelId: this.channelId,
            fileIds: fileIdlist
          },
          success:res=>{
            if(res.success){
              this.$message.success('删除成功!')
              this.storageList()
            }else{
              res.code == 50001?this.$message.error(res.message):this.$message.error('删除失败!')
            }
          }
        })
      })
    },
    mergeStorage(){ //暂存列表视频合并
      if(!this.fileName.trim()){
        this.$message.error('转存需填写名称，否则失败')
        return
      }
      let fileIdlist=this.selectLive.toString()
      this.$postStream('/admin/instance/ccb/polyv/channel/record/merge.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          fileName: this.fileName, 
          fileIds: fileIdlist
        },
        success:res=>{
          if(res.success){
            this.fileName = ''
            this.meshPlaydiolag = false
            this.$message.success('合并转换成功,需要一定时间,请耐心等待')
            this.storageList()
            this.$forceUpdate()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('合并失败!')
            this.fileName = ''
            this.meshPlaydiolag = false
          }
        }
      })
    },
    playList(pageNo) {//回放列表
      this.playTable.isloading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/playback/list.do', {
        data: {
          appId: this.appId,
          channelId: this.channelId,
          page: pageNo || this.playTable.page,
          limit: 10
        },
        success: res => {
          this.playTable.page = pageNo || this.playTable.page
          this.playTable.total = res.object.totalItems
          this.playTable.list = res.object.contents.map(element=>{
            return{
              checked:false,
              name: element.title,
              date: this.splitTime(element.startTime),
              datelong: element.duration,
              sessionId: element.channelSessionId,
              status: this.statusType(element.status),
              type: this.sceneType(element.liveType),
              url:element.url,
              name : element.title,
              videoId : element.videoId,
              fileId:element.fileId,
              channelId:element.channelId,
              userId:element.userId,
              fileUrl:element.fileUrl
            }
          })
          this.playTable.isloading = false
        }
      })
    },
    statusType(item){
      return item==='Y'?'已完成':'未完成'
    },
    savePlayback(){//添加回放视频到回放列表
      this.selectPlay=[]
      this.playBack.list.filter(item=>{
        if(item.checked){
          return this.selectPlay.push(item.videoId)
        }
      })
      if(!this.selectPlay.length){
        this.$message.info('至少勾选一个')
        return
      }
      let videoIdlist=this.selectPlay.toString()
      this.$postStream('/admin/instance/ccb/polyv/channel/playBackAddVideos.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          vids: videoIdlist
        },
        success:res=>{
          if(res.success){
            this.$message.success('添加成功!')
            this.dialogTableVisible=false
            this.playList()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('添加失败!')
          }
        }
      })
    },
    delPlayback(){//删除回放列表
      this.selectPlay=[]
      this.playTable.list.filter(item=>{
        if(item.checked){
          return this.selectPlay.push(item.videoId)
        }
      })
      if(!this.selectPlay.length){
        this.$message.info('至少勾选一个')
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let videoIdlist=this.selectPlay.toString()
        this.$postStream('/admin/instance/ccb/polyv/channel/playBackDeleteBatch.do',{
          data:{
            appId: this.appId,
            channelId: this.channelId,
            videoIds: videoIdlist
          },
          success:res=>{
            if(res.success){
              this.$message.success('删除成功!')
              this.playList()
            }else{
              res.code == 50001?this.$message.error(res.message):this.$message.error('删除失败!')
            }
          }
        })
      })
    },
    openSet(status) {// 回放功能开关修改
      this.$postStream('/admin/instance/ccb/polyv/channel/setPlayBackSwitch.do',{
          data: {
            appId: this.appId,
            channelId: this.channelId,
            playBackEnabled: this.switchVals(status)
          },
          success: res => {
            if (res.success) {
              this.$message.success('修改成功!')
              this.querySet()
            } else {
              res.code == 50001?this.$message.error(res.message):this.$message.error('修改失败!')
              this.watchset = !this.watchset
            }
          }
      })
    },
    querySet() {// 回放功能开关查询
      this.$postStream("/admin/instance/ccb/polyv/channel/getPlayBackSwitch.do",{
        data: {
          appId: this.appId,
          channelId: this.channelId
        },
        success: res => {
          this.watchset=res.object
        },
        error: () => {
          this.$message.error("获取开关失败!")
        }
      })
    },
    tabSelect(tab){
      if(tab.index==0){
        this.storageList()
      }else{
        this.playList()
      }
    }
  },
  mounted() {
    this.channelId = sessionStorage.getItem('channelId')
    this.appId = sessionStorage.getItem('appId')
    this.storageList()
    this.querySet()
  }
}
</script>

<style lang="scss" scoped>
.livePlayback {
  .overdue {
    color: #ccc;
  }
  .liberole-img {
    width: 80px;
    height: 40px;
  }
  .play{
    height: 50px;
  }
  .demonstration {
    display: block;
    color: #409EFF;
    font-size: 14px;
  }
}
</style>
<style>
.el-tooltip__popper{
  
  width:50px ;
  padding: 0 ;
  text-align: center;
}
.el-tooltip__popper[x-placement^=bottom]{
  margin-top: 0;
}
</style>

